<template lang="html">
  <el-dialog
    title="添加订单"
    center
    append-to-body
    custom-class="user-dialog order-add-dialog"
    :visible.sync="dialogVisible"
    width="52%"
    :before-close="handleClose"
    :close-on-click-modal="false"
  >
    <el-row type="flex" justify="space-between">
      <div class="search-box" style="width:242px">
        <el-input
          size="small"
          v-model="search.ddbh"
          placeholder="搜索订单编号"
          prefix-icon="el-icon-search"
          @blur="getOrder"
        />
      </div>
      <el-pagination
        background
        @current-change="currentChange"
        :current-page.sync="page.current"
        :page-size.sync="page.size"
        layout="prev, pager, next"
        :total="page.total"
      />
    </el-row>
    <div class="common-table order-table">
      <el-table :data="data" style="width: 100%" ref="addTable">
        <el-table-column type="selection" width="40" align="center" />
        <el-table-column
          v-for="(item, index) in column"
          :key="item.prop || index"
          :prop="item.prop"
          :min-width="item.width"
          :label="item.label"
        >
          <template slot-scope="scope">
            <el-tag
              v-if="item.prop === 'status'"
              size="mini"
              class="table-tag"
              type="warning"
              >{{ scope.row.status }}</el-tag
            >
            <template v-else>{{ scope.row[item.prop] }}</template>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- footer -->
    <template slot="footer">
      <el-row type="flex" align="middle" justify="space-between">
        <p class="order-add-info">
          <i
            class="el-icon-warning"
          />已选择<span>3</span>项&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;合计：900吨
        </p>
        <div>
          <el-button size="small" @click="handleClose()">取 消</el-button>
          <el-button size="small" type="primary" @click="insertOrder"
            >确 定</el-button
          >
        </div>
      </el-row>
    </template>
  </el-dialog>
</template>

<script>
import { getOrder, insertOrder } from '@/api/order';
export default {
  props: ['dialogVisible', 'ddbh'],
  data() {
    return {
      search: {
        ddbh: ''
      },
      data: [],
      page: {
        current: 1,
        size: 10,
        total: 51
      }
    };
  },
  created() {
    this.column = [
      { prop: 'ddbh', label: '订单编号', width: '12%' },
      { prop: 'org', label: '组织', width: '6%' },
      { prop: 'cj', label: '车间', width: '6%' },
      { prop: 'ddlx', label: '订单类型', width: '9%' },
      { prop: 'pzcode', label: '品牌代码', width: '9%' },
      { prop: 'pz', label: '品牌名称', width: '12%' },
      { prop: 'zb', label: '支别', width: '8%' },
      { prop: 'ywc', label: '重量(吨)', width: '10%' },
      { prop: 'ddjq', label: '订单交期', width: '12%' },
      { prop: 'status', label: '订单状态', width: '8%' }
    ];
    this.getOrder();
  },
  methods: {
    async getOrder() {
      let form = Object.assign({}, this.search);
      form.page = this.page.current - 1;
      form.size = this.page.size;
      form.merge = 'false';
      for (let i in form) {
        if (form[i] === '') {
          delete form[i];
        }
      }
      const res = await getOrder(form);
      if (res.code == 1 && res.data) {
        // 初始children字段 防止第一次点击展开时无字段导致表格不更新
        res.data.dataList.map(item => {
          item.children = [];
          item.type =
            item.status == '已下达'
              ? 'success'
              : item.status == '待下达'
              ? 'warning'
              : 'error';
        });
        this.data = res.data.dataList;
        this.page.total = res.data.total;
      } else {
        this.data = [];
        this.page.total = 0;
      }
    },
    async insertOrder() {
      let selection = this.$refs['addTable'].selection;
      let ids = [];
      if (selection.length > 0) {
        selection.map(item => {
          ids.push(item.ddbh);
        });
      } else {
        this.$message({
          message: '请选择需要添加的订单',
          iconClass: 'el-icon-warning',
          customClass: 'common-message'
        });
        return;
      }
      const res = await insertOrder({ ddbhs: ids, oriddbh: this.ddbh });
      if (res.code == 1) {
        this.$message({
          message: '添加成功',
          iconClass: 'el-icon-success',
          customClass: 'common-message'
        });
        this.$emit('close', 'update');
      }
    },
    currentChange(current) {
      console.log(current);
    },
    handleClose() {
      this.$emit('close', 'close');
    }
  }
};
</script>
